import { formatBigNumber, formatTimestamp } from "@/comm/format";

export const getRatioOption = (ary: any[]) => {
    let option: any = {
        xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
                data: ary.map((val, i) => {
                    return val["timestamp"];
                }),
                formatter: function (value: any) {
                    return formatTimestamp(ary[value]["timestamp"]);
                }
            }
        },
        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: false
                },
                max: 100,
                axisLabel: {
                    formatter: (a: any) => {
                        // return formatBigNumber(a, 2);
                        return a + "%";
                    }
                }
            },
            {
                name: "",
                nameLocation: "start",
                alignTicks: true,
                type: "value",
                inverse: false,
                splitLine: {
                    //去除网格线
                    show: false
                }
            }
        ],
        legend: {
            data: ["多仓账户比例", "空仓账户比例"],
            bottom: 10,
            textStyle: {
                fontSize: 12,
                color: "#ffffff"
            }
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    color: "#ffffff",
                    backgroundColor: "#000000",
                    formatter: function (a: any) {
                        if (a.axisDimension == "y") {
                            let num = Number(a.value);
                            if (num < 1) {
                                return num.toFixed(6);
                            }
                            return num.toFixed(2) + "%";
                        }
                        return formatTimestamp(ary[a.value]["timestamp"]); // 这里使用默认的日期格式
                    }
                }
            },
            borderWidth: 0,
            backgroundColor: "#2F363E",
            formatter: function (params: any[]) {
                // console.log(params, "--5555--")
                let t1 = `<span class='ct-num'>${formatTimestamp(params[0].axisValueLabel)}</span>`;
                let num = params[0].value;
                // console.log('yzt____a',params);
                let s = [
                    `<span class='ct-tip'>${params[0].seriesName}： </span> <span class='ct-num'>${Number(params[0].value).toFixed(2)}%</span>`,
                    `<span class='ct-tip'>${params[1].seriesName}： </span> <span class='ct-num'>${Number(params[1].value).toFixed(2)}%</span>`,
                    `<span class='ct-tip'>${params[2].seriesName}： </span> <span class='ct-num'>${Number(params[2].value).toFixed(2)}</span>`
                    // `<span class='ct-tip'>空仓账户比例： </span> <span class='ct-num'>${(100 - num).toFixed(2)}%</span>`,
                ];

                return [t1, ...s].join("<br>");
            }
        },
        series: [
            {
                name: "多仓账户比例",
                stack: "Total",
                data: ary.map((val, i) => Number(val["longAccount"]) * 100),
                type: "line",
                emphasis: { disabled: true },
                lineStyle: {
                    width: 1
                },
                // symbol: "none",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(13,203,129,0.4)"
                        },
                        {
                            offset: 1,
                            color: "rgba(13,203,129,0.1)"
                        }
                    ])
                }
            },
            {
                name: "空仓账户比例",
                stack: "Total",
                data: ary.map((val, i) => 100),
                type: "line",
                emphasis: { disabled: true },
                lineStyle: {
                    width: 0
                },
                symbol: "none",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(246,71,93,0.1)"
                        },
                        {
                            offset: 1,
                            color: "rgba(246,71,93,0.4)"
                        }
                    ])
                }
            }
        ]
    };

    return option;
};
